<template>
  <div class="zy-title" :class="{'zy-title-bold': bold, 'zy-title-border': border, 'zy-title-padding': padding}">
    <slot></slot>
  </div>
</template>

<script>
	export default {
		name: "zyTitle",
		props: {
      border: {
	      type: Boolean,
	      default: ()=>{
		      return false;
	      }
      },
			bold: {
				type: Boolean,
				default: ()=>{
					return true;
				}
			},
			padding: {
				type: Boolean,
				default: ()=>{
					return true;
				}
			}
    },
		data() {
			return {};
		},
		computed: {},
		watch: {},
		components: {},
		methods: {},
		mounted() {
		},
		created() {
		}
	}
</script>

<style scoped lang="less">
  @import "../../style/common/common";
  .zy-title{
    padding: 16px 0;
    font-size: 16px;
    position: relative;
    &:after{
      content: '';
      position: absolute;
      top:16px;
      bottom: 16px;
      left: 0;
      width: 4px;
      background: @allWarringColor;
    }
    &-bold{
      font-weight: bold;
    }
    &-border{
      border-bottom: 1px solid @borderColor;
    }
    &-padding{
      padding: 16px;
    }
  }
</style>
